<template>
  <div class="cost-game">
    <div class="game-header">
      <div class="header-content">
        <el-button icon="ArrowLeft" @click="goBack">返回游戏中心</el-button>
        <div class="game-title">
          <h1>💰 成本优化挑战</h1>
          <p>在不影响质量的前提下降低成本，提升企业竞争力</p>
        </div>
        <div class="game-stats">
          <el-tag type="success" size="large">第 {{ currentRound }}/6 关</el-tag>
          <el-tag type="warning" size="large">节约: ${{ totalSavings }}k</el-tag>
          <el-tag type="danger" size="large">得分: {{ score }}</el-tag>
        </div>
      </div>
    </div>

    <div class="game-container">
      <!-- 开始界面 -->
      <div v-if="gameStatus === 'ready'" class="game-start">
        <div class="start-card">
          <el-icon class="start-icon"><TrendCharts /></el-icon>
          <h2>成本优化挑战</h2>
          <p>作为成本优化顾问，你需要为6个不同的企业找出成本优化方案</p>
          <div class="game-rules">
            <h3>游戏规则</h3>
            <ul>
              <li>💼 分析6个不同行业的企业成本结构</li>
              <li>📊 找出成本浪费点和优化机会</li>
              <li>🎯 制定优化方案，平衡成本、质量和效率</li>
              <li>💡 每个方案都会影响成本、质量、效率三个指标</li>
              <li>⚖️ 目标：在保证质量的前提下实现最大成本节约</li>
            </ul>
          </div>
          <el-button type="primary" size="large" @click="startGame">
            <el-icon><CaretRight /></el-icon>
            开始挑战
          </el-button>
        </div>
      </div>

      <!-- 游戏进行中 -->
      <div v-if="gameStatus === 'playing'" class="game-playing">
        <el-row :gutter="20">
          <!-- 左侧：企业信息 -->
          <el-col :span="14">
            <el-card class="company-card">
              <template #header>
                <div class="company-header">
                  <h3>{{ currentCase.icon }} {{ currentCase.company }}</h3>
                  <el-tag>{{ currentCase.industry }}</el-tag>
                </div>
              </template>

              <div class="company-content">
                <div class="situation">
                  <h4>📋 企业情况</h4>
                  <p>{{ currentCase.situation }}</p>
                </div>

                <div class="cost-structure">
                  <h4>💵 成本结构分析</h4>
                  <el-table :data="currentCase.costData" border>
                    <el-table-column prop="item" label="成本项目" width="180" />
                    <el-table-column prop="amount" label="金额(万元)" align="right">
                      <template #default="{ row }">
                        ${{ row.amount }}k
                      </template>
                    </el-table-column>
                    <el-table-column prop="ratio" label="占比" align="right">
                      <template #default="{ row }">
                        {{ row.ratio }}%
                      </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" align="center">
                      <template #default="{ row }">
                        <el-tag :type="row.status === '偏高' ? 'danger' : row.status === '正常' ? 'success' : 'warning'" size="small">
                          {{ row.status }}
                        </el-tag>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="total-cost">
                    总成本: ${{ currentCase.totalCost }}k
                  </div>
                </div>

                <div class="optimization-options">
                  <h4>🎯 优化方案</h4>
                  <p class="hint">请选择合适的优化措施（可多选）</p>
                  <el-checkbox-group v-model="selectedOptions" class="options-group">
                    <div 
                      v-for="(option, index) in currentCase.options" 
                      :key="index"
                      class="option-card"
                    >
                      <el-checkbox :label="index">
                        <div class="option-content">
                          <div class="option-header">
                            <strong>{{ option.name }}</strong>
                            <el-tag v-if="option.risk" type="warning" size="small">{{ option.risk }}</el-tag>
                          </div>
                          <p>{{ option.description }}</p>
                          <div class="option-effects">
                            <div class="effect-item">
                              <el-icon class="effect-icon"><Money /></el-icon>
                              <span :class="option.costSaving > 0 ? 'positive' : 'neutral'">
                                成本节约: ${{ option.costSaving }}k
                              </span>
                            </div>
                            <div class="effect-item">
                              <el-icon class="effect-icon"><Star /></el-icon>
                              <span :class="option.qualityImpact < 0 ? 'negative' : option.qualityImpact > 0 ? 'positive' : 'neutral'">
                                质量影响: {{ option.qualityImpact > 0 ? '+' : '' }}{{ option.qualityImpact }}
                              </span>
                            </div>
                            <div class="effect-item">
                              <el-icon class="effect-icon"><Lightning /></el-icon>
                              <span :class="option.efficiencyImpact > 0 ? 'positive' : option.efficiencyImpact < 0 ? 'negative' : 'neutral'">
                                效率影响: {{ option.efficiencyImpact > 0 ? '+' : '' }}{{ option.efficiencyImpact }}
                              </span>
                            </div>
                          </div>
                        </div>
                      </el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>

                <el-button 
                  type="primary" 
                  size="large" 
                  block
                  :disabled="selectedOptions.length === 0"
                  @click="submitOptimization"
                >
                  提交优化方案
                </el-button>
              </div>
            </el-card>
          </el-col>

          <!-- 右侧：指标面板 -->
          <el-col :span="10">
            <el-card class="metrics-panel">
              <h3>📊 关键指标</h3>
              <div class="metric-item">
                <span>成本节约</span>
                <div class="metric-value savings">
                  ${{ roundSavings }}k
                  <el-icon><TrendCharts /></el-icon>
                </div>
              </div>
              <div class="metric-item">
                <span>质量指数</span>
                <el-progress 
                  :percentage="quality" 
                  :color="quality >= 80 ? '#67c23a' : quality >= 60 ? '#e6a23c' : '#f56c6c'"
                />
              </div>
              <div class="metric-item">
                <span>效率指数</span>
                <el-progress 
                  :percentage="efficiency" 
                  :color="efficiency >= 80 ? '#67c23a' : efficiency >= 60 ? '#e6a23c' : '#f56c6c'"
                />
              </div>
            </el-card>

            <el-card class="tips-panel">
              <h3>💡 优化提示</h3>
              <el-alert
                v-for="(tip, index) in currentCase.tips"
                :key="index"
                :title="tip"
                type="info"
                :closable="false"
                show-icon
                class="tip-item"
              />
            </el-card>

            <el-card class="progress-panel">
              <h3>🎯 挑战进度</h3>
              <div class="progress-info">
                已完成: {{ currentRound - 1 }} / 6 关
              </div>
              <el-progress :percentage="((currentRound - 1) / 6) * 100" :show-text="false" />
              <div class="progress-stats">
                <div class="stat">
                  <span>累计节约</span>
                  <strong>${{ totalSavings }}k</strong>
                </div>
                <div class="stat">
                  <span>当前得分</span>
                  <strong>{{ score }}</strong>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 游戏结束 -->
      <div v-if="gameStatus === 'finished'" class="game-finish">
        <div class="finish-card">
          <el-icon class="finish-icon" :class="finalGrade"><Trophy /></el-icon>
          <h2>挑战完成！</h2>
          <div class="final-grade" :class="finalGrade">{{ finalGrade }} 级成本优化师</div>
          <p class="grade-text">{{ gradeText }}</p>

          <div class="final-stats">
            <div class="stat-item">
              <div class="stat-label">总成本节约</div>
              <div class="stat-value highlight">${{ totalSavings }}k</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">平均质量</div>
              <div class="stat-value">{{ averageQuality }}%</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">平均效率</div>
              <div class="stat-value">{{ averageEfficiency }}%</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">最终得分</div>
              <div class="stat-value highlight">{{ score }}</div>
            </div>
          </div>

          <div class="achievement">
            <h3>🏆 获得成就</h3>
            <div class="achievement-list">
              <el-tag v-if="totalSavings >= 500" type="success" size="large">
                💰 成本杀手 (节约超过$500k)
              </el-tag>
              <el-tag v-if="averageQuality >= 85" type="success" size="large">
                ⭐ 质量保证 (质量保持85%以上)
              </el-tag>
              <el-tag v-if="averageEfficiency >= 85" type="success" size="large">
                ⚡ 效率专家 (效率保持85%以上)
              </el-tag>
            </div>
          </div>

          <div class="action-buttons">
            <el-button type="primary" size="large" @click="restartGame">再玩一次</el-button>
            <el-button size="large" @click="goBack">返回游戏中心</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, TrendCharts, CaretRight, Trophy, Money, Star, Lightning
} from '@element-plus/icons-vue'

const router = useRouter()

const gameStatus = ref('ready')
const currentRound = ref(1)
const selectedOptions = ref([])
const totalSavings = ref(0)
const score = ref(0)
const quality = ref(90)
const efficiency = ref(85)
const qualityHistory = ref([])
const efficiencyHistory = ref([])

const cases = [
  {
    id: 1,
    company: '智造科技有限公司',
    industry: '电子制造',
    icon: '🏭',
    situation: '公司生产智能手机配件，年产值5000万，但利润率只有8%，低于行业平均水平12%。主要问题是生产成本偏高。',
    totalCost: 3500,
    costData: [
      { item: '原材料', amount: 1500, ratio: 42.9, status: '正常' },
      { item: '人工成本', amount: 800, ratio: 22.9, status: '偏高' },
      { item: '能源消耗', amount: 400, ratio: 11.4, status: '偏高' },
      { item: '设备折旧', amount: 350, ratio: 10, status: '正常' },
      { item: '仓储物流', amount: 250, ratio: 7.1, status: '偏高' },
      { item: '质检成本', amount: 200, ratio: 5.7, status: '正常' }
    ],
    tips: [
      '人工成本占比较高，可考虑自动化',
      '能源消耗偏高，注意设备效率',
      '仓储物流成本可以优化'
    ],
    options: [
      {
        name: '引入自动化生产线',
        description: '投资自动化设备，减少人工依赖',
        costSaving: 150,
        qualityImpact: 5,
        efficiencyImpact: 10,
        risk: '需要初期投资'
      },
      {
        name: '优化能源管理系统',
        description: '安装节能设备，优化用电时段',
        costSaving: 80,
        qualityImpact: 0,
        efficiencyImpact: 5
      },
      {
        name: '集中采购降低原料成本',
        description: '与更多供应商建立长期合作',
        costSaving: 120,
        qualityImpact: -5,
        efficiencyImpact: 0,
        risk: '可能影响质量'
      },
      {
        name: '优化仓储布局',
        description: '采用精益仓储，减少库存积压',
        costSaving: 60,
        qualityImpact: 0,
        efficiencyImpact: 8
      },
      {
        name: '实施预防性维护',
        description: '定期保养设备，减少故障停机',
        costSaving: 40,
        qualityImpact: 3,
        efficiencyImpact: 7
      }
    ]
  },
  {
    id: 2,
    company: '鲜美餐饮连锁',
    industry: '餐饮',
    icon: '🍽️',
    situation: '连锁餐厅20家门店，食材成本和浪费率都偏高，影响整体盈利能力。',
    totalCost: 2800,
    costData: [
      { item: '食材采购', amount: 1200, ratio: 42.9, status: '偏高' },
      { item: '人员工资', amount: 800, ratio: 28.6, status: '正常' },
      { item: '房租水电', amount: 500, ratio: 17.9, status: '正常' },
      { item: '设备维护', amount: 180, ratio: 6.4, status: '正常' },
      { item: '食材浪费', amount: 120, ratio: 4.3, status: '偏高' }
    ],
    tips: [
      '食材采购成本较高',
      '食材浪费需要控制',
      '可以优化菜单设计'
    ],
    options: [
      {
        name: '建立中央厨房',
        description: '统一采购和初加工，降低单店成本',
        costSaving: 180,
        qualityImpact: 5,
        efficiencyImpact: 12
      },
      {
        name: '优化菜单结构',
        description: '减少低销量菜品，提高食材利用率',
        costSaving: 100,
        qualityImpact: 0,
        efficiencyImpact: 5
      },
      {
        name: '精准备货系统',
        description: '基于数据预测，减少食材浪费',
        costSaving: 80,
        qualityImpact: 0,
        efficiencyImpact: 8
      },
      {
        name: '供应商长期合作',
        description: '与优质供应商签订年度合同',
        costSaving: 120,
        qualityImpact: 3,
        efficiencyImpact: 0
      }
    ]
  },
  {
    id: 3,
    company: '快递物流公司',
    industry: '物流',
    icon: '🚚',
    situation: '快递业务量大但利润薄，燃油和人力成本居高不下，需要优化运营效率。',
    totalCost: 4200,
    costData: [
      { item: '燃油费用', amount: 1400, ratio: 33.3, status: '偏高' },
      { item: '人力成本', amount: 1600, ratio: 38.1, status: '偏高' },
      { item: '车辆维护', amount: 600, ratio: 14.3, status: '正常' },
      { item: '仓储租金', amount: 400, ratio: 9.5, status: '正常' },
      { item: '包装材料', amount: 200, ratio: 4.8, status: '正常' }
    ],
    tips: [
      '燃油成本占比过高',
      '可以优化配送路线',
      '考虑共享配送模式'
    ],
    options: [
      {
        name: '智能路线规划系统',
        description: 'AI优化配送路线，减少空驶',
        costSaving: 200,
        qualityImpact: 5,
        efficiencyImpact: 15
      },
      {
        name: '推广电动车辆',
        description: '逐步替换为新能源车',
        costSaving: 180,
        qualityImpact: 0,
        efficiencyImpact: 3,
        risk: '需要充电设施'
      },
      {
        name: '共享配送网络',
        description: '与其他企业共享配送资源',
        costSaving: 150,
        qualityImpact: -3,
        efficiencyImpact: 8
      },
      {
        name: '优化包装方案',
        description: '使用可循环包装材料',
        costSaving: 50,
        qualityImpact: 0,
        efficiencyImpact: 5
      }
    ]
  },
  {
    id: 4,
    company: '时尚服装公司',
    industry: '零售',
    icon: '👔',
    situation: '库存积压严重，每季有30%的库存需要打折清仓，影响利润率。',
    totalCost: 3000,
    costData: [
      { item: '采购成本', amount: 1200, ratio: 40, status: '正常' },
      { item: '库存积压', amount: 600, ratio: 20, status: '偏高' },
      { item: '门店租金', amount: 700, ratio: 23.3, status: '正常' },
      { item: '人员工资', amount: 400, ratio: 13.3, status: '正常' },
      { item: '营销费用', amount: 100, ratio: 3.3, status: '偏低' }
    ],
    tips: [
      '库存周转率需要提升',
      '可以采用柔性供应链',
      '加强数据分析能力'
    ],
    options: [
      {
        name: '快速反应供应链',
        description: '小批量多批次生产，降低库存',
        costSaving: 250,
        qualityImpact: 0,
        efficiencyImpact: 10
      },
      {
        name: '数据驱动选品',
        description: '基于销售数据精准选品',
        costSaving: 180,
        qualityImpact: 5,
        efficiencyImpact: 8
      },
      {
        name: '会员预售模式',
        description: '通过预售降低库存风险',
        costSaving: 120,
        qualityImpact: 0,
        efficiencyImpact: 5
      },
      {
        name: '线上线下融合',
        description: '通过电商渠道清理库存',
        costSaving: 100,
        qualityImpact: -5,
        efficiencyImpact: 3
      }
    ]
  },
  {
    id: 5,
    company: '云端科技公司',
    industry: '软件服务',
    icon: '💻',
    situation: 'SaaS公司服务器和带宽成本快速增长，需要优化技术架构降低成本。',
    totalCost: 2500,
    costData: [
      { item: '服务器成本', amount: 900, ratio: 36, status: '偏高' },
      { item: '带宽费用', amount: 500, ratio: 20, status: '偏高' },
      { item: '研发人员', amount: 800, ratio: 32, status: '正常' },
      { item: '办公成本', amount: 200, ratio: 8, status: '正常' },
      { item: '营销推广', amount: 100, ratio: 4, status: '偏低' }
    ],
    tips: [
      '服务器利用率可以提升',
      '考虑使用CDN加速',
      '代码优化可以降低资源消耗'
    ],
    options: [
      {
        name: '容器化部署',
        description: '使用Docker提高服务器利用率',
        costSaving: 180,
        qualityImpact: 5,
        efficiencyImpact: 12
      },
      {
        name: 'CDN内容分发',
        description: '使用CDN降低带宽成本',
        costSaving: 150,
        qualityImpact: 8,
        efficiencyImpact: 5
      },
      {
        name: '代码性能优化',
        description: '优化算法，降低计算资源消耗',
        costSaving: 100,
        qualityImpact: 0,
        efficiencyImpact: 10
      },
      {
        name: '弹性伸缩架构',
        description: '根据流量自动调整资源',
        costSaving: 120,
        qualityImpact: 3,
        efficiencyImpact: 8
      }
    ]
  },
  {
    id: 6,
    company: '绿色农业合作社',
    industry: '农业',
    icon: '🌾',
    situation: '有机农产品种植成本高，但市场价格竞争激烈，需要在保证品质的同时降低成本。',
    totalCost: 1800,
    costData: [
      { item: '种子肥料', amount: 500, ratio: 27.8, status: '正常' },
      { item: '人工成本', amount: 700, ratio: 38.9, status: '偏高' },
      { item: '灌溉用水', amount: 200, ratio: 11.1, status: '偏高' },
      { item: '设备折旧', amount: 250, ratio: 13.9, status: '正常' },
      { item: '包装运输', amount: 150, ratio: 8.3, status: '正常' }
    ],
    tips: [
      '人工成本占比较高',
      '可以优化灌溉系统',
      '考虑机械化作业'
    ],
    options: [
      {
        name: '滴灌节水系统',
        description: '精准灌溉，节约用水',
        costSaving: 80,
        qualityImpact: 5,
        efficiencyImpact: 8
      },
      {
        name: '机械化种植',
        description: '引入农业机械，减少人工',
        costSaving: 150,
        qualityImpact: 0,
        efficiencyImpact: 15
      },
      {
        name: '循环农业模式',
        description: '有机肥自制，降低肥料成本',
        costSaving: 100,
        qualityImpact: 8,
        efficiencyImpact: 5
      },
      {
        name: '订单式种植',
        description: '按订单种植，减少损耗',
        costSaving: 70,
        qualityImpact: 3,
        efficiencyImpact: 5
      }
    ]
  }
]

const currentCase = computed(() => cases[currentRound.value - 1])
const roundSavings = ref(0)

const averageQuality = computed(() => {
  if (qualityHistory.value.length === 0) return 0
  return Math.round(qualityHistory.value.reduce((a, b) => a + b, 0) / qualityHistory.value.length)
})

const averageEfficiency = computed(() => {
  if (efficiencyHistory.value.length === 0) return 0
  return Math.round(efficiencyHistory.value.reduce((a, b) => a + b, 0) / efficiencyHistory.value.length)
})

const finalGrade = computed(() => {
  if (totalSavings.value >= 800 && averageQuality.value >= 85) return 'S'
  if (totalSavings.value >= 600 && averageQuality.value >= 80) return 'A'
  if (totalSavings.value >= 400) return 'B'
  if (totalSavings.value >= 200) return 'C'
  return 'D'
})

const gradeText = computed(() => {
  const texts = {
    S: '卓越！你是成本优化大师，完美平衡了成本、质量和效率！',
    A: '优秀！你的成本优化方案非常出色！',
    B: '良好！你掌握了基本的成本优化方法。',
    C: '及格！还需要提升成本管理能力。',
    D: '需要改进！建议系统学习成本管理知识。'
  }
  return texts[finalGrade.value]
})

const startGame = () => {
  gameStatus.value = 'playing'
  ElMessage.success('开始成本优化挑战！')
}

const submitOptimization = () => {
  if (selectedOptions.value.length === 0) {
    ElMessage.warning('请至少选择一个优化方案')
    return
  }

  // 计算影响
  let savingsAmount = 0
  let qualityChange = 0
  let efficiencyChange = 0

  selectedOptions.value.forEach(index => {
    const option = currentCase.value.options[index]
    savingsAmount += option.costSaving
    qualityChange += option.qualityImpact
    efficiencyChange += option.efficiencyImpact
  })

  roundSavings.value = savingsAmount
  totalSavings.value += savingsAmount
  quality.value = Math.max(0, Math.min(100, quality.value + qualityChange))
  efficiency.value = Math.max(0, Math.min(100, efficiency.value + efficiencyChange))

  qualityHistory.value.push(quality.value)
  efficiencyHistory.value.push(efficiency.value)

  // 计算得分
  const roundScore = savingsAmount * 2 + quality.value + efficiency.value
  score.value += roundScore

  ElMessage.success(`本轮节约 $${savingsAmount}k，获得 ${roundScore} 分！`)

  setTimeout(() => {
    if (currentRound.value < 6) {
      currentRound.value++
      selectedOptions.value = []
      roundSavings.value = 0
    } else {
      gameStatus.value = 'finished'
      ElMessage.success('所有挑战完成！')
    }
  }, 2000)
}

const restartGame = () => {
  gameStatus.value = 'ready'
  currentRound.value = 1
  selectedOptions.value = []
  totalSavings.value = 0
  score.value = 0
  quality.value = 90
  efficiency.value = 85
  roundSavings.value = 0
  qualityHistory.value = []
  efficiencyHistory.value = []
}

const goBack = () => {
  router.push('/learning/games')
}
</script>

<style scoped>
.cost-game {
  min-height: 100vh;
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.game-header {
  background: white;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.game-title {
  flex: 1;
  text-align: center;
}

.game-title h1 {
  margin: 0 0 5px 0;
  font-size: 24px;
}

.game-title p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.game-stats {
  display: flex;
  gap: 10px;
}

.game-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* 开始界面 */
.game-start {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.start-card {
  background: white;
  border-radius: 16px;
  padding: 50px;
  max-width: 600px;
  text-align: center;
}

.start-icon {
  font-size: 80px;
  color: #67c23a;
  margin-bottom: 20px;
}

.start-card h2 {
  margin: 0 0 15px 0;
  font-size: 32px;
}

.game-rules {
  text-align: left;
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0 30px;
}

.game-rules h3 {
  margin: 0 0 15px 0;
}

.game-rules ul {
  margin: 0;
  padding-left: 20px;
}

.game-rules li {
  margin-bottom: 8px;
  line-height: 1.6;
}

/* 游戏进行中 */
.company-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.company-header h3 {
  margin: 0;
  font-size: 18px;
}

.company-content h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #303133;
}

.situation,
.cost-structure,
.optimization-options {
  margin-bottom: 30px;
}

.situation p {
  line-height: 1.8;
  color: #606266;
}

.total-cost {
  margin-top: 15px;
  text-align: right;
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.hint {
  color: #909399;
  font-size: 14px;
  margin-bottom: 15px;
}

.options-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.option-card {
  border: 2px solid #dcdfe6;
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s;
}

.option-card:hover {
  border-color: #67c23a;
  background: #f0f9ff;
}

.option-content {
  width: 100%;
}

.option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.option-content p {
  margin: 0 0 12px 0;
  color: #606266;
  line-height: 1.6;
}

.option-effects {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.effect-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.effect-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.effect-item .positive {
  color: #67c23a;
  font-weight: 500;
}

.effect-item .negative {
  color: #f56c6c;
  font-weight: 500;
}

.effect-item .neutral {
  color: #909399;
}

.metrics-panel h3,
.tips-panel h3,
.progress-panel h3 {
  margin: 0 0 20px 0;
  font-size: 16px;
}

.metric-item {
  margin-bottom: 25px;
}

.metric-item span {
  display: block;
  margin-bottom: 8px;
  color: #606266;
  font-size: 14px;
}

.metric-value {
  font-size: 32px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
}

.metric-value.savings {
  color: #67c23a;
}

.tips-panel,
.progress-panel {
  margin-top: 20px;
}

.tip-item {
  margin-bottom: 10px;
}

.progress-info {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

.progress-stats {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.progress-stats .stat {
  text-align: center;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
}

.progress-stats .stat span {
  display: block;
  font-size: 13px;
  color: #909399;
  margin-bottom: 8px;
}

.progress-stats .stat strong {
  font-size: 20px;
  color: #303133;
}

/* 游戏结束 */
.game-finish {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.finish-card {
  background: white;
  border-radius: 16px;
  padding: 50px;
  max-width: 800px;
  text-align: center;
}

.finish-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.finish-icon.S,
.finish-icon.A {
  color: #f59e0b;
}

.finish-card h2 {
  margin: 0 0 20px 0;
  font-size: 32px;
}

.final-grade {
  display: inline-block;
  padding: 10px 30px;
  border-radius: 50px;
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 15px;
}

.final-grade.S {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #8b4513;
}

.final-grade.A {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.grade-text {
  margin: 0 0 30px 0;
  font-size: 16px;
  color: #606266;
}

.final-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat-item {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  border-radius: 12px;
  padding: 20px;
  color: white;
}

.stat-label {
  font-size: 14px;
  margin-bottom: 10px;
  opacity: 0.9;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
}

.stat-value.highlight {
  font-size: 32px;
}

.achievement {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 30px;
}

.achievement h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
}

.achievement-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

@media (max-width: 1200px) {
  .game-playing {
    display: block;
  }
  
  .final-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
